<template>
  <view class="list-card pa-10 br-10" @click="openModel">
    <view v-if="getModelValue?.length" class="fz-14" :class="[tagFlex && 'disFlx flexWarp']">
      <view
        v-for="(v, i) in getModelValue"
        :key="i"
        :class="{ disabled: getDisabled }"
        class="ma-5 tag px-11 linh-20 br-5"
      >
        {{ getValueText(v) }}
      </view>
    </view>
    <view v-else class="disFlxCC fz-12">
      <view v-if="getDisabled" class="py-22 disabledColor">暂无内容</view>
      <view v-else class="py-22 addBtn">
        <text>请添加</text>
        <text class="ant-iconfont fz-12 ml-5">&#xe77e;</text>
      </view>
    </view>
  </view>

  <SelectIndustry
    v-model:show="selectIndustryShow"
    :localdata="getLocaldata"
    :selected="getModelValue"
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { useFormItem } from '../hooks/useContext';
  import { computed, ref, type PropType, unref } from 'vue';
  import SelectIndustry from '@/components/SelectIndustry/index.vue';

  const props = defineProps({
    modelValue: Array as PropType<number[]>,
    placeholder: propTypes.string,
    disabled: propTypes.bool.def(false),
    /** tag flex展示 */
    tagFlex: propTypes.bool.def(false),
  });

  const { getProps, setFormModel } = useFormItem(props);

  const selectIndustryShow = ref(false);


  const getDisabled = computed(() => getProps.value.disabled || props.disabled);

  function getValueText(id: number) {
    return getLocaldata.value.find((v) => v.value == id)?.text;
  }

  const getModelValue = computed((): number[] => props.modelValue || getProps.value.modelValue || []);

  const getLocaldata = computed(() => unref(getProps.value.localdata) || [])

  const openModel = function () {
    if (getDisabled.value) return;
    selectIndustryShow.value = true;
  };

  function handleSubmit(ids: number) {
    setFormModel(ids);
  }
</script>

<style lang="scss" scoped>
  .list-card {
    background-color: #f8f8f8;
    .addBtn {
      color: #2878ff;
    }
    .disabledColor {
      color: #666664;
    }
    .flexWarp {
      flex-wrap: wrap;
    }
    .tag {
      color: #6ba2ff;
      border: solid 1px #6ba2ff;
      flex-shrink: 0;
      width: fit-content;
    }
    .tag.disabled {
      color: #808080;
      border: solid 1px #aaabab;
    }
  }


</style>
